<template>
  <div class="tool-bar-com">
    <!-- left -->
    <div class="left-btn">
      <!-- 设置 -->
      <a-dropdown
        v-model="setVisible"
        :trigger="['click']"
        :disabled="lockMode"
        :style="lockMode ? 'cursor: not-allowed; opacity: 0.45' : ''"
      >
        <span class="setting-icon" :class="{ 'dropdown-open': setVisible }">
          设置 <a-icon :type="'down'" />
        </span>
        <div slot="overlay" class="setting-container">
          <div class="setting-item setting-title">显示设置</div>
          <div class="setting-item">
            <a-checkbox
              v-model="toolBarSetting.scale"
              @change="($event) => onChange('scale', $event)"
              >比例尺</a-checkbox
            >
          </div>
          <div class="setting-item">
            <a-checkbox
              v-model="toolBarSetting.lnglat"
              @change="($event) => onChange('lnglat', $event)"
              >经纬度</a-checkbox
            >
          </div>
          <div class="setting-item">
            <a-checkbox
              v-model="toolBarSetting.legend"
              @change="($event) => onChange('legend', $event)"
              >图例</a-checkbox
            >
          </div>
        </div>
      </a-dropdown>
      <!-- divider -->
      <span class="divider"></span>
      <!-- 地图设置 -->
      <map-reproduction-set
        :map-type="toolBarSetting.mapType"
        :layer-type="toolBarSetting.layerType"
        :lock-mode="lockMode"
        @gis-tile-style="changeMapTypeStyle"
      />
      <!-- divider -->
      <span class="divider"></span>
      <!-- 插入 -->
      <map-insertion-set />
      <!-- divider -->
      <span class="divider"></span>
      <!-- other -->
      <div v-for="(tip, index) in functionList" :key="index">
        <span v-if="tip.tooltip === 'diver'" class="divider"></span>
        <a-tooltip v-else placement="top">
          <template slot="title">
            <span>{{ tip.tooltip }}</span>
          </template>
          <div
            class="btn function-btn-spacing"
            :class="{
              'btn-disabled': tip.disabled,
              'btn-select': currentToolBarAction === tip.click,
            }"
            @click="clickFunction(tip)"
          >
            <a-icon-font :type="tip.icon" />
          </div>
        </a-tooltip>
      </div>
    </div>
    <!-- right -->
    <div class="right-btn">
      <div>
        <a-popover
          placement="leftTop"
          :overlay-class-name="'popover-gis-shortcuts'"
        >
          <template slot="content">
            <p
              v-for="(key, index) in shortcutKeys"
              :key="index"
              :title="key.support ? '' : '暂不支持'"
            >
              {{ key.text }}
            </p>
          </template>
          <template slot="title">
            <span>键盘快捷键</span>
          </template>
          <div class="btn function-btn-spacing">
            <a-icon-font type="iconkuaijiejian" />
          </div>
        </a-popover>
      </div>
      <div v-for="(tip, index) in rightFuncList" :key="'right' + index">
        <span v-if="tip.tooltip === 'diver'" class="divider"></span>
        <a-tooltip v-else :placement="tip.position || 'top'">
          <template slot="title">
            <span>{{ tip.tooltip }}</span>
          </template>
          <div
            class="btn function-btn-spacing"
            :class="{
              'btn-disabled': tip.disabled,
            }"
            @click="clickRightFunction(tip)"
          >
            <a-icon-font :type="tip.icon" />
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 画布工具栏
 */
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import MapReproductionSet from '@/components/gis/gis-analysis/tool-bar-item/MapReproductionSet.vue'
import MapInsertionSet from '@/components/gis/gis-analysis/tool-bar-item/MapInsertionSet.vue'
import GisStore from '@/store/modules/gis'
import mapUtils from '@/components/gis/map-package/map-utils'

@Component({
  components: {
    MapReproductionSet,
    MapInsertionSet,
  },
})
export default class ToolBar extends Vue {
  @Prop({ type: Object }) toolBarSetting!: any // 显示比例尺 显示经纬度 显示图例
  @Prop({ type: Boolean, default: true }) private lockMode!: boolean

  public functionList: any[] = [
    {
      tooltip: '测量',
      click: 'gisMappingVisible',
      icon: 'iconbiaochi',
      disabled: this.lockMode,
    },
    { tooltip: 'diver', click: '', icon: '' },
    {
      tooltip: '统计分析',
      click: 'mathematicalAnalysisVisible',
      icon: 'iconshulitongji1',
      disabled: this.lockMode,
    },
    { tooltip: 'diver', click: '', icon: '' },
    {
      tooltip: '行政区搜索',
      click: 'gisSearchVisible',
      icon: 'iconsousuo',
      disabled: false,
    },
    {
      tooltip: '框选',
      click: 'gisBoxSelectVisible',
      icon: 'icontaosuo2',
      disabled: true,
    },
    {
      tooltip: '复位',
      click: 'gisRestoration',
      icon: 'iconhuidaohuabanbeifen3',
      disabled: false,
    },
    {
      tooltip: '平移',
      click: 'gisPanVisible',
      icon: 'icontuodongbeifen',
      disabled: false,
    },
  ]

  public setVisible: boolean = false // 设置 open

  public shortcutKeys: any[] = [
    { support: true, text: '【Shift】图层多选' },
    { support: false, text: '*【Control+C】复制' },
    { support: false, text: '*【O/M/L】圆形/矩形/自动套索选区' },
    { support: false, text: '*【Control+D】取消选取' },
    { support: false, text: '*【空格】画布平移切换' },
    { support: false, text: '*【Control+Shift+S】保存到可视化' },
    { support: false, text: '*【Control+Alt+S】导出' },
    { support: false, text: '注：* 表示暂不支持' },
  ]

  /**
   * 当前 激活的工具栏项
   */
  public get currentToolBarAction() {
    return GisStore.currentToolBarAction
  }

  /**
   * 是否同步至系统构建
   * 是：禁用 “同步” 按钮
   */
  public get currentTabIsSync() {
    return GisStore.currentTabIsSync
  }

  public get rightFuncList(): any[] {
    return [
      { tooltip: 'diver', click: '', icon: '' },
      {
        tooltip: '复制画布',
        click: 'copy',
        icon: 'iconfuzhijiedian',
        disabled: this.lockMode,
      },
      {
        tooltip: '保存',
        click: 'save',
        icon: 'iconbaocun',
        disabled: this.lockMode,
      },
      {
        tooltip: '导出',
        click: 'export',
        icon: 'iconshujuguanli-daohang-daorushuju',
        disabled: true,
      },
      {
        tooltip: this.currentTabIsSync ? '已同步' : '同步至系统构建',
        click: 'synchronous',
        icon: 'iconrizhi-shuaxin',
        position: 'topRight',
        disabled: this.currentTabIsSync || this.lockMode,
      },
    ]
  }

  /**
   * 多个功能 统一点击入口
   */
  public clickFunction(action: any) {
    const { click } = action
    if (click === 'gisRestoration') {
      this.resetMapByVisibleLayers()
    } else if (this.currentToolBarAction === click) {
      GisStore.setCurrentToolBarAction(null)
    } else if (!action.disabled) {
      GisStore.setCurrentToolBarAction(click)
    }
  }

  /**
   * 根据可见的图层复位
   */
  public resetMapByVisibleLayers() {
    const visibleLayer: any[] = GisStore.layerList.filter(
      (layer: any) => layer.visible === 1
    )
    mapUtils.gisMapResetByVisibleLayers(
      GisStore.mapboxInstance,
      visibleLayer,
      GisStore.layerData
    ) // 基于所有可视图层包围盒复位
  }

  public clickRightFunction(data: { click: string; disabled: boolean }) {
    const { click: action, disabled } = data
    if (this.lockMode && !['export'].includes(action)) {
      return
    }
    switch (action) {
      case 'copy': // 复制
        this.copyTab()
        break
      case 'save': // 保存
        this.saveTabInfo()
        break
      case 'export': // 导出
        this.$message.warn('暂不支持！')
        break
      case 'synchronous': // 同步
        if (!disabled) {
          this.synchronousTab()
        }
        break
      default:
        break
    }
  }

  public async copyTab() {
    const parameters: any = {
      projectId: GisStore.projectId,
      tabId: GisStore.currentTabId,
    }
    try {
      const response: any = await GisStore.copyTabApiByTabId(parameters)
      if (response.data.code === 100) {
        this.$message.success('复制画布成功！')
        this.$emit('change-tab', response.data.result.tabId)
      }
    } catch (error) {
      console.log(error)
    }
  }

  /**
   * 保存 tab 下的配置信息， 包含图层配置等
   * @private
   */
  private async saveTabInfo() {
    const response: any = await GisStore.gisSaveTabInfoWithLayer()
    if (response.data.code === 100) {
      this.$message.success('保存成功！')
    }
  }

  /**
   * 同步至系统构建
   */
  private async synchronousTab() {
    GisStore.setMapLoading(true)
    this.resetMapByVisibleLayers() // 先复位
    // GisStore.mapboxInstance.isMoving // 等待复位移动动画稳定
    setTimeout(async () => {
      console.log(GisStore.mapboxInstance.isMoving())
      const base64: string = GisStore.mapboxInstance.getCanvas().toDataURL()
      const response: any = await GisStore.synchronousTab(base64)
      GisStore.setMapLoading(false)
      if (response.data.code === 100) {
        this.$message.success('同步成功')
        GisStore.setCurrentTabIsSync(true)
      }
    }, 1000)
  }

  @Emit('setting')
  public onChange(type: string, $event: any) {
    return { type, info: { [type]: $event.target.checked } }
  }

  @Emit('setting')
  public changeMapTypeStyle(info: any) {
    return { type: 'gis-tile-style', info }
  }
}
</script>

<style scoped lang="less">
/* 功能按钮 */
.tool-bar-com {
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  box-sizing: border-box;
  display: flex;
  height: 38px;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;

  .left-btn,
  .right-btn {
    align-items: center;
    display: flex;

    .select {
      background-color: rgba(105, 115, 255, 0.1);
      color: #6973ff !important;
    }

    .btn {
      align-items: center;
      border-radius: 2px;
      color: rgb(93, 99, 126);
      cursor: pointer;
      display: flex;
      font-size: 16px;
      padding: 4px;
      position: relative;
      user-select: none;

      &:hover {
        background-color: rgba(105, 115, 255, 0.1);
        color: #6973ff;
      }
    }

    .btn-select {
      background-color: rgba(105, 115, 255, 0.1);
      color: #6973ff;
    }

    .function-btn-spacing {
      margin: 0 5px;
    }

    .function-btn-spacing-right {
      margin-right: 5px;
    }

    .btn-recommend.disable {
      filter: grayscale(100%);
      opacity: 0.6;
    }

    .btn-disabled {
      cursor: not-allowed !important;
      opacity: 0.45;
    }
  }
}
/* 分割线 */
.divider {
  border-right: 1px solid #5d637e;
  height: 16px;
  margin: 0 5px;
  width: 1px;
}
// 设置
.setting-icon {
  border-radius: 2px;
  cursor: pointer;
  margin-right: 5px;
  padding: 1px 4px;
  user-select: none;
}
// 设置
.dropdown-open {
  background: rgba(103, 113, 252, 0.1);
  color: #6973ff;
}
// 设置 内容
.setting-container {
  background: #fff;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  margin-top: 5px;
  outline: none;
  padding: 6px 0;
  width: 160px;

  .setting-title {
    color: #373b52;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .setting-item {
    height: 32px;
    padding: 0 20px;
    width: 100%;
  }
}
// icon 禁用
.disable {
  cursor: not-allowed;
  opacity: 0.45;
}
</style>
<style lang="less">
.popover-gis-shortcuts {
  width: 270px !important;

  .ant-popover-inner-content {
    > p {
      color: #5d637e;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-bottom: 6px;
    }
  }
}
</style>
